<template>
  <div class="content-upload">
    <div class="upload-title">
      <span>选择发布类型</span>
    </div>
    <div class="uploade-body">
      <div class="body-box" @click="goyp" >
        <div class="box-le">
          <div class="le-img">
            <img src="./imgs/xiangji.png" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>发布约拍</span>
            <span>你可以发布约拍需求。约拍摄影师、模特</span>
          </div>
        </div>
      </div>
      <div class="body-box" @click="gozp">
        <div class="box-le">
          <div class="le-img">
            <img src="./imgs/tupian.png" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>发布作品</span>
            <span>您可以上传自己的作品或照片，和大家一起分享，提高吸引力</span>
          </div>
        </div>
      </div>
      <div class="body-box" @click="gocd" >
        <div class="box-le">
          <div class="le-img">
            <img src="./imgs/changdi.png" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>发布场地</span>
            <span>您可以分享自己知道的比较合适的拍摄场地，帮助他人创作</span>
          </div>
        </div>
      </div>
      <div class="body-box" @click="gojc" >
        <div class="box-le">
          <div class="le-img">
            <img src="./imgs/jiaocheng.png" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>发布教程</span>
            <span>您可以分享自己创作时获得的经验和教训，帮助他人少走弯路</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog} from "vant";

export default {
  name: "appupload",
  data(){
    return{}
  },
  created() {
    const uid = localStorage.getItem('uid')
    if(!uid){
      Dialog.alert({
        title: '温馨提示',
        message: '您还未登录，暂时无法使用该功能',
      }).then(() => {
        this.$router.replace('/')
      });
    }
  },
  methods:{
    goyp(){
      this.$router.push({
        name: "upfb",
        params: {
          release: "yp"
        }
      })
    },
    gozp(){
      this.$router.push({
        name: "upfb",
        params: {
          release: "zp"
        }
      })
    },
    gocd(){
      this.$router.push({
        name: "upfb",
        params: {
          release: "cd"
        }
      })
    },
    gojc(){
      this.$router.push({
        name: "upfb",
        params: {
          release: "jc"
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.content-upload{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .upload-title{
    width: 100%;
    height: vw(90);
    line-height: vw(90);
    background-color: #ffffff;
    text-align: center;
  }
  .uploade-body{
    flex: 1;
    background-color: #ffffff;
    overflow-y: auto;
    .body-box{
      height: vw(140);
      display: flex;
      padding: 0 vw(65);
      box-sizing: border-box;
      align-items: center;
      margin: vw(50) 0;
      .box-le{
        padding-right: vw(50);
        width: vw(100);
        height: vw(100);
        .le-img{
          img{
            width: vw(100);
            height: vw(100);
            object-fit: cover;
          }
        }
      }
      .box-rg{
        flex: 1;
        height: vw(140);
        .rg-le{
          width: vw(430);
          display: flex;
          flex-direction: column;
          span{
            font-size: vw(32);
            font-weight: 500;
            color: #e65563;
            &:last-child{
              padding-top: vw(15);
              font-size: vw(27);
              font-weight: 300;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>
